<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <div class="logo">
          <img src="/logo.png" alt="家政服务平台" />
          <span>家政服务平台</span>
        </div>
        <el-icon @click="toggleSidebar"><Menu /></el-icon>
        <el-icon @click="refreshData"><Refresh /></el-icon>
        <span class="nav-text">申请管理</span>
      </div>
      <div class="header-right">
        <el-button class="client-btn">
          <el-icon><Monitor /></el-icon>
          客户端
        </el-button>
        <el-badge is-dot>
          <el-icon><Bell /></el-icon>
        </el-badge>
        <el-icon><Setting /></el-icon>
        <el-dropdown @command="handleCommand">
          <div class="user-info">
            <el-avatar :size="32">{{ userInitials }}</el-avatar>
            <span>{{ username }}</span>
            <el-icon><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="settings">账号设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span style="color: #f56c6c;">注销</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <div class="main-container">
      <!-- 左侧菜单 -->
      <el-aside width="64px" class="sidebar">
        <router-link to="/admin" custom v-slot="{ navigate }">
          <div class="menu-item" @click="navigate">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </div>
        </router-link>
        <router-link to="/admin/service-management" custom v-slot="{ navigate }">
          <div class="menu-item" @click="navigate">
            <el-icon><Setting /></el-icon>
            <span>服务管理</span>
          </div>
        </router-link>
        <router-link to="/admin/user-management" custom v-slot="{ navigate }">
          <div class="menu-item" @click="navigate">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </div>
        </router-link>
        <router-link to="/admin/application-management" custom v-slot="{ navigate }">
          <div class="menu-item active" @click="navigate">
            <el-icon><Promotion /></el-icon>
            <span>审批系统</span>
          </div>
        </router-link>
        <router-link to="/admin/worker-management" custom v-slot="{ navigate }">
          <div class="menu-item" @click="navigate">
            <el-icon><User /></el-icon>
            <span>家政管理</span>
          </div>
        </router-link>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main-content">
        <div class="application-management">
          <div class="page-header">
            <h2>家政人员申请管理</h2>
            <div class="header-actions">
              <el-button @click="refreshData" type="primary" :icon="Refresh">刷新数据</el-button>
            </div>
          </div>

  <!-- 筛选器区域 -->
  <el-card class="filter-container">
    <div class="filter-form">
      <el-form :model="filterForm" inline>
<!--        <el-form-item label="申请状态">-->
<!--          <el-select v-model="filterForm.applicationStatus" placeholder="选择状态" clearable>-->
<!--            <el-option label="待审批" value="待审批" />-->
<!--            <el-option label="已通过" value="已通过" />-->
<!--            <el-option label="已拒绝" value="已拒绝" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="姓名">-->
<!--          <el-input v-model="filterForm.name" placeholder="搜索姓名" clearable />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="服务类型">-->
<!--          <el-select v-model="filterForm.serviceType" placeholder="选择服务类型" clearable>-->
<!--            <el-option label="清洁服务" value="清洁服务" />-->
<!--            <el-option label="照护服务" value="照护服务" />-->
<!--            <el-option label="烹饪服务" value="烹饪服务" />-->
<!--            <el-option label="维修服务" value="维修服务" />-->
<!--            <el-option label="其他服务" value="其他服务" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <!-- 申请状态下拉框 -->
        <el-form-item label="申请状态">
          <el-select v-model="filterForm.applicationStatus" placeholder="选择状态" clearable
                     popper-class="custom-select-dropdown">
            <!-- 自定义触发器内容 -->
            <template #prefix v-if="filterForm.applicationStatus">
              <el-tag
                  size="small"
                  :type="filterForm.applicationStatus === '待审批' ? 'warning' :
              filterForm.applicationStatus === '已通过' ? 'success' : 'danger'"
                  class="select-tag">
                {{ filterForm.applicationStatus }}
              </el-tag>
            </template>
            <el-option label="待审批" value="待审批">
              <div class="select-option-content">
                <el-tag size="small" type="warning">待审批</el-tag>
              </div>
            </el-option>
            <el-option label="已通过" value="已通过">
              <div class="select-option-content">
                <el-tag size="small" type="success">已通过</el-tag>
              </div>
            </el-option>
            <el-option label="已拒绝" value="已拒绝">
              <div class="select-option-content">
                <el-tag size="small" type="danger">已拒绝</el-tag>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 服务类型下拉框 -->
        <el-form-item label="服务类型">
          <el-select v-model="filterForm.serviceType" placeholder="选择服务类型" clearable
                     popper-class="custom-select-dropdown">
            <!-- 自定义触发器内容 -->
            <template #prefix v-if="filterForm.serviceType">
              <el-tag size="small" type="info" class="select-tag">
                {{ filterForm.serviceType }}
              </el-tag>
            </template>
            <el-option label="清洁服务" value="清洁服务">
              <div class="select-option-content">
                <el-tag size="small" type="info">清洁服务</el-tag>
              </div>
            </el-option>
            <el-option label="照护服务" value="照护服务">
              <div class="select-option-content">
                <el-tag size="small" type="info">照护服务</el-tag>
              </div>
            </el-option>
            <el-option label="烹饪服务" value="烹饪服务">
              <div class="select-option-content">
                <el-tag size="small" type="info">烹饪服务</el-tag>
              </div>
            </el-option>
            <el-option label="维修服务" value="维修服务">
              <div class="select-option-content">
                <el-tag size="small" type="info">维修服务</el-tag>
              </div>
            </el-option>
            <el-option label="其他服务" value="其他服务">
              <div class="select-option-content">
                <el-tag size="small" type="info">其他服务</el-tag>
              </div>
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="申请日期">
          <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">筛选</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>

          <!-- 修改后的数据表格 -->
          <el-card class="table-container">
            <div class="table-header">
              <div class="statistics">
                <el-tag type="warning" effect="dark">待审批: {{ counts.pending }}</el-tag>
                <el-tag type="success" effect="dark">已通过: {{ counts.approved }}</el-tag>
                <el-tag type="danger" effect="dark">已拒绝: {{ counts.rejected }}</el-tag>
                <el-tag type="info" effect="dark">总计: {{ counts.total }}</el-tag>
              </div>
            </div>

            <el-table
                :data="applicationList"
                style="width: 100%"
                border
                stripe
                v-loading="loading"
                @row-click="handleRowClick"
                row-key="id"
            >
              <el-table-column type="index" width="50" align="center" />
              <el-table-column prop="name" label="姓名" sortable width="100" align="center" />
              <el-table-column prop="gender" label="性别" width="70" align="center" />
              <el-table-column prop="age" label="年龄" width="70" align="center" sortable />
              <el-table-column prop="phone" label="联系电话" width="130" align="center" />
              <el-table-column prop="serviceType" label="服务类型" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="workerStatus" label="工作状态" width="100" align="center">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.workerStatus === '在职' ? 'success' :
                  scope.row.workerStatus === '休假' ? 'warning' : 'info'"
                      size="small"
                  >
                    {{ scope.row.workerStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="joinDate" label="申请日期" width="120" align="center" sortable />
              <el-table-column prop="applicationStatus" label="审批状态" width="100" align="center">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.applicationStatus === '待审批' ? 'warning' :
                  scope.row.applicationStatus === '已通过' ? 'success' : 'danger'"
                      size="small"
                  >
                    {{ scope.row.applicationStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="reviewTime" label="审批时间" width="180" align="center" sortable />
              <el-table-column label="操作" fixed="right" width="180" align="center">
                <template #default="scope">
                  <el-button
                      type="primary"
                      size="small"
                      :disabled="scope.row.applicationStatus !== '待审批'"
                      @click.stop="openApprovalDialog(scope.row, 'approve')"
                  >
                    通过
                  </el-button>
                  <el-button
                      type="danger"
                      size="small"
                      :disabled="scope.row.applicationStatus !== '待审批'"
                      @click.stop="openApprovalDialog(scope.row, 'reject')"
                  >
                    驳回
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页组件保持不变 -->
          </el-card>

          <!-- 审批对话框 -->
          <el-dialog
              v-model="approvalDialogVisible"
              :title="approvalAction === 'approve' ? '通过申请' : '驳回申请'"
              width="500px"
          >
            <div v-if="selectedApplication">
              <div class="approval-info">
                <p><strong>申请人：</strong>{{ selectedApplication.name }}</p>
                <p><strong>服务类型：</strong>{{ selectedApplication.serviceType }}</p>
                <p><strong>申请日期：</strong>{{ selectedApplication.joinDate }}</p>
              </div>

              <el-form :model="approvalForm" ref="approvalFormRef" :rules="approvalRules">
                <el-form-item
                    v-if="approvalAction === 'reject'"
                    label="驳回理由"
                    prop="rejectReason"
                    :rules="[
            { required: true, message: '请输入驳回理由', trigger: 'blur' },
            { min: 5, message: '驳回理由不能少于5个字符', trigger: 'blur' }
          ]"
                >
                  <el-input
                      v-model="approvalForm.rejectReason"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入驳回理由，将通知给申请人"
                  />
                </el-form-item>
                <el-form-item
                    v-if="approvalAction === 'approve'"
                    label="备注"
                    prop="approveNote"
                >
                  <el-input
                      v-model="approvalForm.approveNote"
                      type="textarea"
                      :rows="3"
                      placeholder="可选：添加备注信息"
                  />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="approvalDialogVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="submitting"
                    @click="submitApproval"
                >
                  确认{{ approvalAction === 'approve' ? '通过' : '驳回' }}
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 详情对话框 -->
          <el-dialog
              v-model="detailDialogVisible"
              title="申请详情"
              width="60%"
          >
            <div v-if="selectedApplication" class="application-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="姓名">{{ selectedApplication.name }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ selectedApplication.gender }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ selectedApplication.age }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ selectedApplication.phone }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ selectedApplication.idCard }}</el-descriptions-item>
                <el-descriptions-item label="工作状态">
                  <el-tag
                      :type="selectedApplication.workerStatus === '在职' ? 'success' :
                  selectedApplication.workerStatus === '休假' ? 'warning' : 'info'"
                  >
                    {{ selectedApplication.workerStatus }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="服务类型" :span="2">
                  <el-tag
                      v-for="(type, index) in formatServiceTypes(selectedApplication.serviceType)"
                      :key="index"
                      style="margin-right: 5px;"
                  >
                    {{ type }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="申请日期">{{ selectedApplication.joinDate }}</el-descriptions-item>
                <el-descriptions-item label="审批状态">
                  <el-tag
                      :type="selectedApplication.applicationStatus === '待审批' ? 'warning' :
                  selectedApplication.applicationStatus === '已通过' ? 'success' : 'danger'"
                  >
                    {{ selectedApplication.applicationStatus }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="审批时间" v-if="selectedApplication.reviewTime">
                  {{ selectedApplication.reviewTime }}
                </el-descriptions-item>
                <el-descriptions-item label="工作经验" :span="2">
                  <div class="experience-content">{{ selectedApplication.workExperience }}</div>
                </el-descriptions-item>
              </el-descriptions>

              <div class="detail-actions" v-if="selectedApplication.applicationStatus === '待审批'">
                <el-button
                    type="primary"
                    @click="openApprovalDialog(selectedApplication, 'approve')"
                >
                  通过申请
                </el-button>
                <el-button
                    type="danger"
                    @click="openApprovalDialog(selectedApplication, 'reject')"
                >
                  驳回申请
                </el-button>
              </div>
            </div>
          </el-dialog>
        </div> <!-- 关闭 application-management -->
      </el-main> <!-- 关闭 el-main -->
    </div> <!-- 关闭 main-container -->
  </div> <!-- 关闭 home-container -->
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  HomeFilled, Menu, Setting, Bell, Monitor, CaretBottom, Refresh,
  Promotion, User
} from '@element-plus/icons-vue';
import {getWorkerApplicationList, updateWorkerApplication} from "@/api/worker-application/work-application.js";

const router = useRouter();

// 管理员信息
const username = ref('admin');
const userInitials = computed(() => {
  return username.value.charAt(0).toUpperCase();
});

// 侧边栏控制
const isCollapse = ref(false);
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value;
};

// 处理用户菜单
const handleCommand = (command) => {
  if (command === 'logout') {
    logout();
  } else if (command === 'profile') {
    // 处理个人信息
    ElMessage.info('功能开发中');
  } else if (command === 'settings') {
    // 处理账号设置
    ElMessage.info('功能开发中');
  }
};

// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token');
    ElMessage({
      type: 'success',
      message: '已成功退出登录'
    });
    router.push('/login');
  }).catch(() => {});
};

// 状态和变量
const loading = ref(false);
const applicationList = ref([]);
const totalApplications = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const filterForm = reactive({
  applicationStatus: '',
  name: '',
  serviceType: '',
  dateRange: []
});
const approvalDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const selectedApplication = ref(null);
const approvalAction = ref('approve'); // 'approve' 或 'reject'
const approvalForm = reactive({
  rejectReason: '',
  approveNote: ''
});
const submitting = ref(false);
const approvalFormRef = ref(null);
const approvalRules = reactive({});

// 统计数量
const counts = reactive({
  pending: 0,
  approved: 0,
  rejected: 0,
  total: 0
});

// 获取申请列表 - 修改后的版本
const fetchApplications = async () => {
  loading.value = true;
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      applicationStatus: filterForm.applicationStatus || undefined,
      name: filterForm.name || undefined,
      serviceType: filterForm.serviceType || undefined,
      startDate: filterForm.dateRange && filterForm.dateRange[0] ? filterForm.dateRange[0] : undefined,
      endDate: filterForm.dateRange && filterForm.dateRange[1] ? filterForm.dateRange[1] : undefined
    };

    console.log('请求参数:', params);
    const response = await getWorkerApplicationList();
    console.log('响应数据:', response.data);

    if (response.data.code === 200) {
      // 使用服务器返回的完整数据列表
      applicationList.value = response.data.data || [];

      // 手动计算统计数据
      counts.total = applicationList.value.length;
      counts.pending = applicationList.value.filter(item => item.applicationStatus === '待审批').length;
      counts.approved = applicationList.value.filter(item => item.applicationStatus === '已通过').length;
      counts.rejected = applicationList.value.filter(item => item.applicationStatus === '已拒绝').length;

      // 设置总记录数用于分页
      totalApplications.value = counts.total;

      // 应用本地筛选
      if (filterForm.applicationStatus) {
        applicationList.value = applicationList.value.filter(
            item => item.applicationStatus === filterForm.applicationStatus
        );
      }

      if (filterForm.name) {
        applicationList.value = applicationList.value.filter(
            item => item.name && item.name.includes(filterForm.name)
        );
      }

      if (filterForm.serviceType) {
        applicationList.value = applicationList.value.filter(
            item => item.serviceType && item.serviceType.includes(filterForm.serviceType)
        );
      }

      // 添加日期范围筛选
      if (filterForm.dateRange && filterForm.dateRange.length === 2) {
        const startDate = new Date(filterForm.dateRange[0]);
        const endDate = new Date(filterForm.dateRange[1]);

        // 确保结束日期包含当天的最后时刻
        endDate.setHours(23, 59, 59, 999);

        applicationList.value = applicationList.value.filter(item => {
          if (!item.joinDate) return false;
          const itemDate = new Date(item.joinDate);
          return itemDate >= startDate && itemDate <= endDate;
        });
      }

      // 更新筛选后的统计数据
      totalApplications.value = applicationList.value.length;
    } else {
      ElMessage.warning(response.data.message || '获取申请列表失败');
    }
  } catch (error) {
    console.error('获取申请列表失败:', error);
    //ElMessage.error('获取申请列表失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};


// 筛选处理
const handleFilter = () => {
  currentPage.value = 1;
  fetchApplications();
};

// 重置筛选
const resetFilter = () => {
  filterForm.applicationStatus = '';
  filterForm.name = '';
  filterForm.serviceType = '';
  filterForm.dateRange = [];
  currentPage.value = 1;
  fetchApplications();
};

// 刷新数据
const refreshData = () => {
  fetchApplications();
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchApplications();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchApplications();
};

// 行点击处理
const handleRowClick = (row) => {
  selectedApplication.value = {...row};
  detailDialogVisible.value = true;
};

// 打开审批对话框
const openApprovalDialog = (row, action) => {
  selectedApplication.value = {...row};
  approvalAction.value = action;
  approvalForm.rejectReason = '';
  approvalForm.approveNote = '';
  approvalDialogVisible.value = true;
  detailDialogVisible.value = false;
};

// 提交审批 - 修改后的版本
const submitApproval = async () => {
  if (approvalAction.value === 'reject' && !approvalForm.rejectReason.trim()) {
    ElMessage.warning('请输入驳回理由');
    return;
  }

  submitting.value = true;

  try {
    // 创建一个WorkerApplication对象，与后端实体类保持一致
    const currentDateTime = new Date().toISOString().slice(0, 10); // 格式化为yyyy-MM-dd

    const workerApplication = {
      id: selectedApplication.value.id,
      workerId: selectedApplication.value.workerId,
      name: selectedApplication.value.name,
      phone: selectedApplication.value.phone,
      idCard: selectedApplication.value.idCard,
      image: selectedApplication.value.image,
      address: selectedApplication.value.address,
      gender: selectedApplication.value.gender,
      age: selectedApplication.value.age,
      serviceType: selectedApplication.value.serviceType,
      workExperience: selectedApplication.value.workExperience,
      joinDate: selectedApplication.value.joinDate,
      workerStatus: selectedApplication.value.workerStatus,
      applicationStatus: approvalAction.value === 'approve' ? '已通过' : '已拒绝',
      reviewTime: currentDateTime,
      reviewerId: 1 // 假设当前管理员ID为1，实际应根据登录用户获取
    };

    // 添加审批备注或驳回理由到工作经验字段
    if (approvalAction.value === 'approve' && approvalForm.approveNote) {
      workerApplication.workExperience =
          (workerApplication.workExperience || '') +
          `\n\n审批备注: ${approvalForm.approveNote}`;
    } else if (approvalAction.value === 'reject' && approvalForm.rejectReason) {
      workerApplication.workExperience =
          (workerApplication.workExperience || '') +
          `\n\n驳回理由: ${approvalForm.rejectReason}`;
    }

    console.log('提交的审批数据:', workerApplication);

    const response = await updateWorkerApplication(workerApplication);

    if (response.data.code === 200) {
      ElMessage.success(approvalAction.value === 'approve' ? '申请已通过' : '申请已驳回');
      approvalDialogVisible.value = false;
      await fetchApplications(); // 刷新数据
    } else {
      ElMessage.warning(response.data.message || '处理申请失败');
    }
  } catch (error) {
    console.error('处理申请失败:', error);
    if (error.response) {
      console.error('错误响应:', error.response.data);
    }
    ElMessage.error('处理申请失败，请稍后再试');
  } finally {
    submitting.value = false;
  }
};

// 页面初始化时获取数据
onMounted(() => {
  fetchApplications();
});
</script>


<style scoped>
/* 覆盖Element Plus的默认内边距 */
:deep(.el-header), :deep(.el-aside), :deep(.el-main) {
  padding: 0;
  margin: 0;
}

:deep(.el-main) {
  --el-main-padding: 20px;
  padding: var(--el-main-padding);
}

.home-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f7fa;
  position: absolute;
  left: 0;
  top: 0;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-weight: bold;
  font-size: 18px;
}

.logo img {
  height: 32px;
  margin-right: 8px;
}

.nav-text {
  margin-left: 15px;
}

.header-left .el-icon {
  margin-right: 15px;
  font-size: 18px;
  cursor: pointer;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right .el-icon {
  font-size: 20px;
  margin: 0 15px;
  cursor: pointer;
}

.client-btn {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
}

.user-info span {
  margin: 0 8px;
}

/* 主容器样式 */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #fff;
  height: 100%;
  box-shadow: 1px 0 4px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  z-index: 900;
  width: 64px !important;
  min-width: 64px;
  flex-shrink: 0;
  margin: 0;
  padding-left: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s;
}

.menu-item span {
  font-size: 12px;
  margin-top: 5px;
}

.menu-item .el-icon {
  font-size: 20px;
}

.menu-item.active {
  color: #1989fa;
  background-color: #f0f7ff;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  overflow-y: auto;
  width: calc(100% - 64px);
  box-sizing: border-box;
}

/* 申请管理页面样式 */
.application-management {
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-container, .table-container {
  margin-bottom: 20px;
}

.filter-form {
  margin-top: 10px;
}

.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics {
  display: flex;
  gap: 15px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.approval-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.approval-info p {
  margin: 5px 0;
}

.experience-content {
  white-space: pre-line;
  line-height: 1.6;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.detail-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.application-detail {
  padding: 10px;
}

/* 添加到style部分 */
:deep(.el-select .el-input__wrapper) {
  padding-left: 8px;
}

:deep(.select-tag) {
  margin-right: 5px;
}

:deep(.custom-select-dropdown .el-select-dropdown__item) {
  padding: 0 10px !important;
}

:deep(.select-option-content) {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

</style>
